﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>Mobiscroll日期时间中文精简实例 ( SnoopyChen修改增加中文支持 ceo@vmeitime.com )</title>

    <link rel="stylesheet" type="text/css" href="FT_Date.min.css">
    <script src="../Jquery2.1.js"></script>
    <script src="FT_Date.min.js"></script>


    <!-- E 可根据自己喜好引入样式风格文件 -->

    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
            font-family: arial, verdana, sans-serif;
            font-size: 12px;
            background: #ddd;
        }

        input, select {
            width: 100%;
            padding: 5px;
            margin: 5px 0;
            border: 1px solid #aaa;
            box-sizing: border-box;
            border-radius: 5px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -webkit-border-radius: 5px;
        }

        .header {
            border: 1px solid #333;
            background: #111;
            color: white;
            font-weight: bold;
            text-shadow: 0 -1px 1px black;
            background-image: linear-gradient(#3C3C3C,#111);
            background-image: -webkit-gradient(linear,left top,left bottom,from(#3C3C3C),to(#111));
            background-image: -moz-linear-gradient(#3C3C3C,#111);
        }

            .header h1 {
                text-align: center;
                font-size: 16px;
                margin: .6em 0;
                padding: 0;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

        .content {
            padding: 15px;
            background: #fff;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            var currYear = (new Date()).getFullYear();
            var opt = {
                date: { preset: 'date' },
                datetime: { preset: 'datetime' },
                time: { preset: 'time' },
                defaultopi: {
                    theme: 'android-ics light', //皮肤样式
                    display: 'modal', //显示方式 
                    mode: 'scroller', //日期选择模式
                    lang: 'zh',
                    startYear: currYear - 10, //开始年份
                    endYear: currYear + 10, //结束年份
                    onShow: function (html, valueText, inst) {
                        //valueText = '2012-04-10 11:59';
                        // mobiscroll('setVal', value, fill, change, temp);
                        alert(S)
                    }
                },

            };
            $("#appDate").scroller($.extend(opt['date'], opt['defaultopi'])).scroller('setDate', new Date(2014, 5, 14), true);
            var optDateTime = $.extend(opt['datetime'], opt['defaultopi']);
            var optTime = $.extend(opt['time'], opt['defaultopi']);
            //var SDAT = $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime).scroller('setDate', getDate("2012-9-20 23:59:00"), true);
            var SDAT = $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);
            $("#appTime").mobiscroll(optTime).time(optTime);

            //下面注释部分是上面的参数可以替换改变它的样式
            //希望一起研究插件的朋友加我个人QQ也可以，本人也建个群 291464597 欢迎进群交流。哈哈。这个不能算广告。
            // 直接写参数方法
            //$("#scroller").mobiscroll(opt).date(); 
            // Shorthand for: $("#scroller").mobiscroll({ preset: 'date' });
            //具体参数定义如下
            //{
            //preset: 'date', //日期类型--datatime --time,
            //theme: 'ios', //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【sense-ui】【sense-ui】
            //【wp light】【wp】
            //mode: "scroller",//操作方式【scroller】【clickpick】【mixed】
            //display: 'bubble', //显示方【modal】【inline】【bubble】【top】【bottom】
            //dateFormat: 'yyyy-mm-dd', // 日期格式
            //setText: '确定', //确认按钮名称
            //cancelText: '清空',//取消按钮名籍我
            //dateOrder: 'yymmdd', //面板中日期排列格
            //dayText: '日', 
            //monthText: '月',
            //yearText: '年', //面板中年月日文字
            //startYear: (new Date()).getFullYear(), //开始年份
            //endYear: (new Date()).getFullYear() + 9, //结束年份
            //showNow: true,
            //nowText: "明天",  //
            //showOnFocus: false,
            //height: 45,
            //width: 90,
            //rows: 3}

        });

        function getDate(strDate) {
            var st = strDate;
            var a = st.split(" ");
            var b = a[0].split("-");
            var c = a[1].split(":");
            var date = new Date(b[0], b[1], b[2], c[0], c[1], c[2])
            return date;
        }
    </script>
</head>

<body>
    <div class="header">
        <h1>Mobiscroll精简实例</h1>
    </div>

    <div class="content">

        <div class="demos">
            <label for="appDate">日期</label>
            <input type="text" name="appDate" id="appDate"  />
        </div>
        <div class="demos">
            <label for="appDateTime">日期时间</label>
            <input type="text" name="appDateTime" id="appDateTime"  />
        </div>
        <div class="demos">
            <label for="appTime">时间</label>
            <input type="text" name="appTime" id="appTime" value="23:59" />
        </div>
    </div>

</body>
</html>
